<script setup>
import {ref, watch} from "vue";
import {reqSysLogPage, reqSysLogRemoveBatch} from "@/api/modules/sysLog.js";
import {format} from '@/utils/time.js'
import {toNumber} from "lodash/lang.js";
import {debounce} from "lodash";
import {ElMessage} from "element-plus";

const yesterday = () => {
  const date = new Date()
  date.setDate(date.getDate() - 1)
  return format(date)
}
const pageParams = ref({
  pageNum: 1,
  pageSize: 10,
  like: '',
  startTime: null,
  endTime: null,
})

const dateRange = ref()
const changeDateTime = (e) => {
  pageParams.value.startTime = !e ? null : e[0]
  pageParams.value.endTime = !e ? null : e[1]
}
const total = ref()
const tableData = ref()
const removeIds = ref()

const handleSelectionChange = (e) => {
  removeIds.value = e.map(item => item.id)
}
const handleRemove = async () => {
  const ids=removeIds.value
  removeIds.value=[]
  await reqSysLogRemoveBatch(ids)
  ElMessage.success('删除成功')
  await loadSysLog()
}
const loadSysLog = async () => {
  const res = await reqSysLogPage(pageParams.value)
  tableData.value = res.list
  total.value = toNumber(res.total)
}
loadSysLog()
const loadSysLogDebounce=debounce(loadSysLog,500)
watch(pageParams,(newVal)=>{
  loadSysLogDebounce()
},{
  deep:true
})
</script>

<template>
  <el-card>
    <template #header>
      <el-form inline>
        <el-form-item>
          <el-button :disabled="!removeIds||removeIds.length===0" type="danger" @click="handleRemove" v-hasPerm="'sys:log:dml'">删除选中
          </el-button>
        </el-form-item>
        <el-form-item v-hasPerm="'sys:log:dql'">
          <el-input v-model="pageParams.like" placeholder="方法签名/URI" clearable></el-input>
        </el-form-item>
        <el-form-item v-hasPerm="'sys:log:dql'">
          <el-date-picker type="datetimerange" v-model="dateRange"
                          format="YYYY-MM-DD HH:mm:ss"
                          value-format="YYYY-MM-DD hh:mm:ss"
                          range-separator="To"
                          start-placeholder="Start date"
                          end-placeholder="End date"
                          @change="changeDateTime">
          </el-date-picker>
        </el-form-item>
      </el-form>
    </template>
    <template #default>
      <el-table :data="tableData" show-overflow-tooltip @selection-change="handleSelectionChange" :row-key="row=>row.id">
        <el-table-column type="selection" :reserve-selection="true" v-hasPerm="'sys:log:dml'"/>
        <el-table-column prop="type" label="类型"/>
        <el-table-column prop="requestUri" label="请求URI"/>
        <el-table-column prop="methodSignature" label="方法签名"/>
        <el-table-column prop="args" label="方法参数"/>
        <el-table-column prop="duration" label="耗时(ms)" width="100px"/>
        <el-table-column prop="createTime" sortable label="创建时间"/>
        <el-table-column prop="createBy" label="创建人"/>
      </el-table>
    </template>
    <template #footer>
      <el-pagination
          v-model:current-page="pageParams.pageNum"
          v-model:page-size="pageParams.pageSize"
          :page-sizes="[5, 10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      />
    </template>
  </el-card>
</template>

<style scoped lang="scss">
.el-card {
  height: 100%;

  :deep .el-card__header {
    padding: 10px;
    height: 50px;
  }

  :deep .el-card__body {
    padding: 10px;
    height: calc(100% - 120px);

    .el-table {
      height: 100%;
      overflow: auto;
    }
  }

  :deep .el-card__footer {
    padding: 10px;
    height: 70px;
  }
}
</style>
